<!--  -->
<template>
  <div class="valid-period">
    <div class="anov-modal-icon-wrapper">
      <div class="anov-modal-circle-o"></div>
      <div class="anov-modal-circle-i"></div>
      <i class="platformicon icon_jinggao anov-modal-icon"></i>
    </div>
    <div class="valid-period-wrapper">
      <p class="anov-valid-label">{{ label }}</p>
      <TextArea
        class="anov-valid-textarea"
        v-model="textValue"
        :placeHolder="placeHolder"
        @change="inputChange"
        ref="textarea-value"
      />
      <p class="anov-valid-error">{{ placeHolder }}</p>
    </div>
    <div class="anov-modal-btn" @click="validBtn">
      {{ $t('cmlpanel.confirm') }}
    </div>
  </div>
</template>

<script>
import { Input } from 'ant-design-vue'
import * as anov from 'anov-core'
const { TextArea } = Input
export default {
  name: 'validPeriod',
  components: {},
  data() {
    return {
      label: '身份认证已过期，请重新输入验证码：',
      validTextarea: '',
      placeHolder: '请输入有效的许可证',
      textValue: ''
    }
  },
  computed: {
    ...anov.licenseServer.mapState(['code'])
  },
  watch: {},
  methods: {
    getLicense() {
      anov.licenseServer.addEventListener('noPass', (e) => {
        let params = { type: 'error', componentsName: 'validPeriod' }
        this.label = e.result.message
        // EventBus.$emit('openModal', params)
      })
    },
    init(params) {
      this.label = params.content
      let _this = this
      this.tl = new TimelineMax({
        autoRemoveChildren: true,
        onStart: function () {}
      })
      let tw1 = TweenMax.to('.valid-period', 0.3, { opacity: 1 })
      let tw4 = TweenMax.to('.valid-period .anov-modal-icon-wrapper', 0.3, {
        scale: 1,
        opacity: 1,
        ease: Power0.easeInOut
      })
      let tw5 = TweenMax.to('.valid-period .anov-modal-icon', 0.2, {
        opacity: 1,
        scale: 1
      })
      let tw8 = TweenMax.to('.valid-period .valid-period-wrapper', 0.3, {
        opacity: 1
      })
      let tw9 = TweenMax.to('.valid-period .anov-modal-btn', 0.3, {
        opacity: 1
      })
      this.tl.addLabel('start')
      this.tl
        .add(tw1, 'start+=0')
        .add(tw4, 'start+=0.1')
        .add(tw5, 'start+=0.2')
        .add(tw8, 'start+=.4')
        .add(tw9, 'start+=.4')
      return this.tl
    },
    reset() {
      this.tl.reverse()
      TweenMax.set('.valid-period', { opacity: 0 })
      TweenMax.set('.valid-period .anov-modal-icon-wrapper', {
        scale: 0,
        opacity: 0
      })
      TweenMax.set('.valid-period .anov-modal-icon', { opacity: 0, scale: 0 })
      TweenMax.set('.valid-period .anov-modal-text', { opacity: 0 })
      TweenMax.set('.valid-period .anov-modal-btn', { opacity: 0 })
    },
    destroy(params) {
      let textareaVal = this.$refs['textarea-value'].value
      let code = this.textValue
      anov.licenseServer.code = code
      let obj = anov.licenseServer.validate()
      if (obj.isValid) {
        let path = this.$route.name
        //存储code到运行时
        let search = window.location.href.split('?')[1] || ''
        search = search.split('#')[0]
        search += 'license.code=' + anov.licenseServer.code
        window.location.search = search

        TweenMax.to('.anov-valid-error', 0.3, { opacity: 0, height: 0 })
        TweenMax.to('.valid-period .anov-modal-btn', 0.3, { opacity: 1 })
        this.reset()
        if (typeof params.onClose == 'function') {
          params.onClose()
        }
        // EventBus.$emit('closeModal', {noticeType: 'modal', componentsName: 'validPeriod'})
      } else {
        this.placeHolder = obj.message
        TweenMax.to('.anov-valid-error', 0.3, { opacity: 1, height: 20 })
      }
    },
    inputChange(e) {
      this.textValue = e.target.value
    },
    validBtn() {
      app.modal.destroy({ componentsName: 'validPeriod' })
    }
  },
  created() {},
  mounted() {
    this.getLicense()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.valid-period {
  opacity: 0;
}
.valid-period-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-valid-textarea {
  width: 600px;
  padding: 5px;
  min-height: 100px;
  margin-top: 20px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.8);
  color: rgba(199, 255, 250, 0.8);
}
.anov-valid-error {
  height: 0;
  opacity: 0;
}
.get-valid {
}
</style>
